<template>
    <!--
        新增或编辑表单
    -->
    <el-dialog 
        :title="title" 
        :visible.sync="visible"
        v-if="visible"
        width="700px"
        :show-close="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        append-to-body>
        <el-form  ref="FORM" :model="form" :rules="rule" label-width="120px">
            <el-row style="padding-bottom: 10px;">
                <el-col :span="24">调用方：
                    <el-card style="height: 140px; margin-top: 5px;">
                        <el-descriptions title="" :column="1">
                            <el-descriptions-item label="应用名称">
                                <template slot="label">
                                    应用名称
                                    <el-tooltip effect="light" placement="right">
                                        <i class="el-icon-question" style="font-size: 16px; vertical-align: middle;"></i>
                                        <div slot="content">
                                            <p>指定调用者的服务名（AppId），* 表示全部服务，默认：*</p>
                                            <p>示例：service-users</p>
                                        </div>
                                    </el-tooltip>
                                </template>
                                <el-input v-model="form.callerAppId" style="width: 300px;"></el-input>
                            </el-descriptions-item>
                            <el-descriptions-item label="匹配规则">
                                <template slot="label">
                                    匹配规则
                                    <el-tooltip effect="light" placement="right">
                                        <i class="el-icon-question" style="font-size: 16px; vertical-align: middle;"></i>
                                        <div slot="content">
                                            <p>如果有多个相同的细项匹配键相同，则以最后一个规则覆盖为准</p>
                                            <p>示例1：IP - 127.0.0.1 - 127.0.0.1</p>
                                            <p>示例2：HEADER - uid - admin</p>
                                        </div>
                                    </el-tooltip>
                                </template>
                                <rule-type-select v-model="form.ruleType" style="width: 160px;" placeholder="请选择类型"></rule-type-select>
                                -
                                <el-input v-model="form.callerKey" style="width: 160px;" placeholder="请输入匹配键"></el-input>
                                -
                                <el-input v-model="form.callerValue" style="width: 160px;" placeholder="请输入匹配值"></el-input>
                            </el-descriptions-item>
                            <el-descriptions-item label="流量比重">
                                <template slot="label">
                                    流量比重
                                    <el-tooltip effect="light" placement="right">
                                        <i class="el-icon-question" style="font-size: 16px; vertical-align: middle;"></i>
                                        <div slot="content">
                                            <p>流量比重：当路由规则匹配成功后，指定流量比重（IP哈希取模），匹配成功后且在比重内的流量访问规则内路由成功，否则将访问非规则内路由</p>
                                            <p>选择区间：0~100</p>
                                        </div>
                                    </el-tooltip>
                                </template>
                                <el-input-number v-model="form.weight" controls-position="right" :min="0" :max="100" style="width: 100px;">
                            </el-input-number></el-descriptions-item>
                        </el-descriptions>
                    </el-card>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">被调方：
                    <el-card style="height: 140px; margin-top: 5px;">
                        <el-descriptions title="" :column="1">
                            <el-descriptions-item label="应用名称">
                                <template slot="label">
                                    应用名称
                                    <el-tooltip effect="light" placement="right">
                                        <i class="el-icon-question" style="font-size: 16px; vertical-align: middle;"></i>
                                        <div slot="content">
                                            <p>指定被调者的服务名（AppId），* 表示全部服务，默认：*</p>
                                            <p>示例：service-order</p>
                                        </div>
                                    </el-tooltip>
                                </template>
                                <el-input v-model="form.calleeAppId" style="width: 300px;"></el-input>
                            </el-descriptions-item>
                            <el-descriptions-item label="匹配规则">
                                <template slot="label">
                                    匹配规则
                                    <el-tooltip effect="light" placement="right">
                                        <i class="el-icon-question" style="font-size: 16px; vertical-align: middle;"></i>
                                        <div slot="content">
                                            <p>标签键：应用元数据中（Metadata）的标签</p>
                                            <p>标签透传：标签键以<el-tag type="warning">gk-route-</el-tag>开头的，都会这个落链路中透传</p>
                                            <p>要求：标签键必须以<el-tag type="warning">gk-route-</el-tag>开头，如果有多个相同的细项标签键相同，则以最后一个规则覆盖为准</p>
                                            <p>示例1：gk-route-rule -> gray</p>
                                            <p>示例2：gk-route-version -> v0.2</p>
                                        </div>
                                    </el-tooltip>
                                </template>
                                <el-input v-model="form.calleeLabel" style="width: 200px;" disabled="disabled"> </el-input>
                                -
                                <el-input v-model="form.calleeLabelValue" style="width: 160px;" placeholder="请输入标签值"></el-input>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-card>
                </el-col>
            </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submit()">确 定</el-button>
            <el-button @click="close()">关 闭</el-button>
        </div>
    </el-dialog>
</template>

<script>
import RuleTypeSelect from '../modules/rule_type_select.vue'

export default {
    components: {
        RuleTypeSelect
    },
    data() {
        return {
            title: '',
            visible: false,
            index: null,
            form: {

            },
            rule: {
                methodUrl: [{ required: true, message: '请输入匹配路径', trigger: 'blur' }],
                paramName: [{ required: true, message: '请输入参数名称', trigger: 'blur' }],
                paramType: [{ required: true, message: '请选择参数类型', trigger: 'blur' }],
                paramValue: [{ required: true, message: '请输入参数值', trigger: 'blur' }]
            },
            loading: false,
            disabled: false,
            timeRanges: null,
            paramTypeOptions: [
                {
                    value: 'String',
                    label: 'String'
                },
                {
                    value: 'Number',
                    label: 'Number'
                },
                {
                    value: 'Boolean',
                    label: 'Boolean'
                }
            ]
        }
    },
    methods: {
        /**
         * 提交表单
         */
        async submit() {
            if (!this.valid('FORM')) return
            const row = Object.assign(this.form, {});           
            this.$emit('success', JSON.stringify(row), this.index)
            this.$message.success('操作成功')
            this.close()
        },

        /**
         * 校验表单
         */
        valid(formRef) {
            let res = false;
            this.$refs[formRef].validate((valid) => {
                if (valid) {
                    res = valid
                }
            })
            return res;
        },

        /**
         * 打开表单
         */
        open(row, index) {
            // this.visible = true
            // this.title = '添加规则细项'

            this.visible = true
            this.index = index
            if (row.id) {
                this.title = '编辑规则细项'
            } else {
                this.title = '添加规则细项'
            }
            // 赋值
            this.form = Object.assign({}, row)
        },

        /**
         * 关闭表单
         */
        close() {
            this.$refs['FORM'].resetFields()
            this.$refs['FORM'].clearValidate()
            this.visible = false
        },

        /**
         * 时间区间
         */
        setTime(val) {
            this.form.startTime  = val[0]
            this.form.finishTime = val[1]
        },
    }
}
</script>

<style scoped>
.el-dialog {
    background-color: #f5f5f5;
}

</style>